<template>
  <el-dialog
    :visible.sync="openProcessAttr"
    :fullscreen="true"
    :destroy-on-close="true"
    :show-close="false">
    <div style="
        border-bottom: 1px solid rgb(232,232,232);
        position: absolute;
        top: 0; left: 0;
        height: 70px; width: 100%;
        line-height: 70px; padding-left: 20px; padding-right: 20px;">
      <span style="font-weight: bold; font-size: 20px;">流程变量</span>

      <div style="float:right;">
        <el-button plain icon="el-icon-close" @click="openProcessAttr = false"></el-button>
      </div>
    </div>

    <el-card class="box-card" style="margin: 40px;">
      <div class="text item">
        <el-table
          ref="multipleTable"
          :data="variables"
          height="750"
          max-height="750"
          border
          tooltip-effect="dark"
          style="width: 100%;">
          <el-table-column
            type="index"
            label="序号"
            width="55"
            align="center"
            sortable>
          </el-table-column>
          <el-table-column
            prop="name"
            align="center"
            label="变量名">
          </el-table-column>
          <el-table-column
            prop="value"
            align="center"
            label="变量值">
          </el-table-column>
        </el-table>
      </div>
    </el-card>

  </el-dialog>
</template>

<script>

import { getProcessVariable } from "@/api/camunda/camunda";

export default {
  name: "comment",
  data() {
    return {
      openProcessAttr: false,
      variables: []
    }
  },
  methods: {
    init(processInstanceId){
      getProcessVariable(processInstanceId)
        .then(({data}) => {
          this.openProcessAttr = true
          this.variables = data
        }).catch(() => {
          this.openProcessAttr = false
      })
    },
  }
}
</script>

<style scoped>

</style>
